@import models.Tables.GenomeRow
@(row: GenomeRow)
@species = @{
    row.species match {
        case "XJDY" => Html("<i>M. sativa </i>cultivar XinJiangDaYe")
        case "ZMNO" => Html("<i>M. sativa </i>cultivar Zhongmu No. 1")
        case "MSAE" => Html("<i>M. sativa spp. caerulea</i>")
        case "MTRU" => Html("<i>M. truncatula</i>")
        case "ZM-4" => Html("<i>M. sativa </i>cultivar Zhongmu No. 4")
    }
}

@config.main(row.geneid) {
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("network/vis.min.css")">
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("config/sidebar.css")">

    <style>
            table {
                white-space: normal !important;
            }

            th {
                width: 20% !important;
            }

            .box-plot {
                width: 100%;
            }

            .seq {
                height: 150px;
                overflow: auto;
                padding-right: 25px;
                word-break: break-all;
            }

            .fa-search:hover {
                cursor: pointer;
            }

            .flank-gene {
                color: red;
            }

            #rna-seq {
                display: none;
            }

            .rna-box .fixed-table-body {
                min-height: unset;
            }
    </style>
    <div class="body-box">
        <div class="page-box">

            @config.subTitle2(row.geneid, species, "/alfalfa/browse/genome/" + row.species)

            <div class="main-body">

                <div class="bs-sidebar" id="myScrollspy">
                    <div class="bs-docs-sidebar affix" id="myNav">
                        <ul class="bs-docs-sidenav nav" >
                            <li class="active"><a href="#basic">Basic info</a></li>
                            <li><a href="#jbrowse">JBrowser</a></li>
                            <li><a href="#og">OG</a></li>
                            <li><a href="#kegg">KEGG</a></li>
                            <li><a href="#anno">Annotation</a></li>
                            <li class="block-gene"><a href="#blockBox">Block</a></li>
                            <li class="rna-seq-gene"> <a href="#rna-seq">RNA-seq</a></li>
                            @if(row.species == "ZMNO") {

                                <li><a href="#net">Network</a></li>
                                <li><a href="#variable">Variation</a></li>
                            }
                            <li><a href="#seqs">Seqs</a></li>
                        </ul>
                    </div>
                </div>


                @components.scrollComponents("Basic Info","basic") {
                    <table class="table table-hover table-bordered">
                        <tbody>
                            <tr><th>Gene ID</th><td>@row.geneid</td></tr>
                            <tr><th>Chromsome</th><td>@row.chr</td></tr>
                            <tr><th>Start Position</th><td>@row.start</td></tr>
                            <tr><th>End Position</th><td>@row.end</td></tr>
                            <tr><th>Strand</th><td>@row.strand</td></tr>
                        </tbody>
                    </table>
                }

                @components.scrollComponents("Genome Browser","jbrowse") {
                    <iframe style="border: 1px solid rgb(80, 80, 80);" id="iframe" height="400" width="100%" name="jbrowse_iframe">
                    </iframe>
                }

                @components.scrollComponents("OG","og") {
                    <table class="table table-hover table-bordered">
                        <tbody>
                            <tr><th>eggNOG OGs</th><td colspan="3">@row.eggnogOgs</td></tr>
                            <tr><th>narr OG name</th><td>@row.narrOgName</td><th>
                                best OG name</th><td>@row.bestOgName</td></tr>
                            <tr><th>narr OG cat</th><td>@row.narrOgCat</td><th>best OG cat</th><td>@row.bestOgCat</td></tr>
                            <tr><th>narr OG desc</th><td>@row.narrOgDesc</td><th>
                                best OG desc</th><td>@row.bestOgDesc</td></tr>
                        </tbody>
                    </table>
                }

                @components.scrollComponents("KEGG","kegg") {
                    <table class="table table-hover table-bordered">
                        <tbody>
                            <tr><th>EC</th><td><a href="https://www.kegg.jp/dbget-bin/www_bget?ec:@{
                                row.ec.trim
                            }" target="_blank">@row.ec.trim</a></td></tr>
                            <tr><th>KEGG ko</th><td>@for(ko <- row.keggKo.split(",").map(_.trim.drop(3))) {
                                <a href="https://www.genome.jp/entry/@ko" target="_blank">@ko</a>
                            }</td></tr>
                            <tr><th>KEGG Pathway</th><td>@for(path <- row.keggPathway.split(",").map(_.trim)) {
                                <a href="https://www.kegg.jp/pathway/@path" target="_blank">@path</a>
                            }</td></tr>
                            <tr><th>KEGG Module</th><td>@for(module <- row.keggModule.split(",").map(_.trim)) {
                                <a href="https://www.kegg.jp/module/@module" target="_blank">@module</a>
                            }</td></tr>
                            <tr><th>KEGG Reaction</th><td>@for(kegg <- row.keggReaction.split(",").map(_.trim)) {
                                <a href="https://www.kegg.jp/entry/@kegg" target="_blank">@kegg</a>
                            }</td></tr>
                            <tr><th>KEGG rclass</th><td>@for(rclass <- row.keggRclass.split(",").map(_.trim)) {
                                <a href="https://www.kegg.jp/entry/@rclass" target="_blank">@rclass</a>
                            }</td></tr>
                            <tr><th>KEGG TC</th><td>@row.keggTc</td></tr>
                            <tr><th>KEGG BRITE</th><td>@for(brite <- row.brite.split(",").map(_.trim)) {
                                <a href="https://www.kegg.jp/brite/@brite" target="_blank">@brite</a>
                            }</td></tr>
                        </tbody>
                    </table>
                }

                @components.scrollComponents("Annotation","anno") {
                    <table class="table table-hover table-bordered">
                        <tbody>
                            <tr><th>GOs</th><td>@for(go <- row.gos.split(",").map(_.trim)) {
                                <a href="http://amigo.geneontology.org/amigo/term/@go" target="_blank"> @go </a>
                            }</td></tr>
                            <tr><th>Preferred name</th><td>@row.preferredName</td></tr>
                            <tr><th>CAZy</th><td>@row.cazy</td></tr>
                            <tr><th>BiGG Reaction</th><td>@row.biggReaction</td></tr>
                            <tr><th>PFAMs</th><td>@for(pfam <- row.pfams.split(",").map(_.trim)) {
                                <a href="http://pfam.xfam.org/family/@pfam" target="_blank">@pfam</a>
                            }</td></tr>
                        </tbody>
                    </table>
                }

                @components.scrollComponents("Block", "blockBox") {
                    <div style="width: 100%">
                        <table class="table table-hover table-bordered" id="table" data-pagination="true" data-advanced-sortable="true"
                        data-page-list="[10]">
                        </table>
                    </div>
                    <div id="circos-plot">

                    <button class="btn btn-primary" onclick="DownloadSvgFn('all-circos')">Dowload SVG <i class="fa fa-download"></i></button>

                    <div id="all-circos"></div>
                    </div>

                }

                @components.scrollComponents("RNA-seq", "rna-seq") {
                    @RnaSelect
                    <div id="columns" style="width: 100%;
                        margin-top: 15px"></div>
                    <div style="width: 100%;
                        overflow-x: auto;" class="rna-box">
                        <table class="table table-hover table-bordered" id="rna-table" style="width: 100%;"
                        data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"
                        ></table>
                    </div>
                }
                @if(row.species == "ZMNO") {

                    @components.scrollComponents("Network", "net") {
                        <div id="charts" style="height: 500px;
                            width: 100%;
                            background-color: white"></div>

                        <div style="width: 100%;">
                            <table class="table table-hover table-bordered" id="net-table" style="width: 100%;" data-advanced-sortable="true" data-pagination="true"
                            data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all" data-page-list="[10]"
                            >
                                <thead>
                                    <tr>
                                        <th data-field="0" data-sortable="true" data-search-type="text" data-formatter="GetByGeneId">
                                            From Node</th>
                                        <th data-field="1" data-sortable="true" data-search-type="text" data-formatter="GetByGeneId">
                                            To Node</th>
                                        <th data-field="2" data-sortable="true" data-search-type="text">Weight</th>
                                    </tr>
                                </thead>

                            </table>

                        </div>

                    }

                    @components.scrollComponents("Variation", "variable") {
                        <div id="columns2" style="width: 100%;
                            margin-top: 15px"></div>

                            <div id="heatmap" style="width: 100%;
                            margin-top: 15px"></div>

                        <div style="width: 100%;">

                        @components.navUlComponents(Seq(("snp", "SNP", snpTable),
                            ("indel", "Indel", indelTable),
                            ("sv", "SV", svTable),
                        ), "snp")
                        </div>

                    }
                }
                @components.scrollComponents("Seqs","seqs") {
                    <table class="table table-hover table-bordered">
                        <tbody>
                            <tr><th>
                                CDS<button class="btn" onclick="downloadSeq('@row.geneid', 'cds')"><i class="fa fa-download"></i></button></th><td class="monospace"><div class="seq">
                                >@row.geneid<br/> <div id="cds"></div></div></td></tr>
                            <tr><th>
                                Protein<button class="btn" onclick="downloadSeq('@row.geneid', 'pep')"><i class="fa fa-download"></i></button></th><td class="monospace"><div class="seq">
                                >@row.geneid<br/> <div id="pep"></div></div></td></tr>
                            @*添加文本框按钮功能，+-数字，提序列展示，gene染色，不用互补，直接坐标位置提取*@
                            <tr><th>
                                Flank<button class="btn" onclick="downloadSeq('@row.geneid', 'flank')"><i class="fa fa-download"></i></button>

                                <div style="display: flex">
                                    <input type="text" id="flankNum" class="form-control" placeholder="Number" value="1000" />
                                    <i class="fa fa-search" style="margin-left: -25px;
                                        margin-top: 10px" onclick="GetFlank()"></i>

                                </div>


                            </th>
                                <td class="monospace"><div class="seq">
                                    >@row.geneid<br/> <div id="flank"></div></div></td></tr>
                        </tbody>
                    </table>
                }

            </div>
        </div>
    </div>

    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("FileSaver.js-master/FileSaver.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("config/genomeTable.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts-more.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/exporting.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("network/vis.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("config/sidebar.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("circos/d3.v3.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("circos/bam2x.circos.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("circos/test.js")" type="text/javascript"></script>

    <script>

            let rnaData;
            let rnaHeader;

            $(function () {
                $('body').scrollspy({target: '#myScrollspy'})

                $("#myNav").affix({
                    offset: {
                        top: 200
                    }
                });


                let host = window.location.hostname;
                $("#iframe").attr("src", "https://modms.lzu.edu.cn/jbrowse/?data=my_data/Alfalfa/@{row.species}/data&loc=@row.chr:@row.start..@row.end&tracks=DNA,Annotation,Bed&tracklist=0&nav=1&overview=0")

                $.post("@routes.GenomeController.getBlockById(row.id)", (data) => {
                    if (data.exist === "false") {
                      //  $("#blockBox").find(".picture_list").html("<h4>Not Found!</h4>")
                        $("#blockBox").hide()
                        $(".block-gene").hide()
                    } else {
                        const columns = getTableColumns(blockHead, "table")
                        $("#table").bootstrapTable({
                            data: data.block,
                            columns: columns
                        })

               //         if(data.circosPlot === "true") {

                            let datas = [
                                {
                                    "canvas": "all-circos",
                                    "ideoCollection": data.circos.collection,
                                    "linkCollection": data.circos.ur
                                }
                            ];
                            circos(datas)
        /*                }else {
                            $("#circos-plot").hide()
                        }*/
                    }
                })

                $.post("@routes.RNASeqController.getRnaSeqData(row.geneid)", (data) => {
                    if (data.exist === "false") {
                     //   $("#rna-seq").find(".picture_list").html("<h4>Not Found!</h4>")
                        $("#rna-seq").hide()
                        $(".rna-seq-gene").hide()
                    } else {
                        rnaData = data.datas;
                        rnaHeader = data.header;
                        ChangeRna();
                        $("#rna-seq").show()
                    }

                })

                $.post("/alfalfa/browse/getSeqs?geneid=@{row.geneid}&species=@{row.species}", (data) => {
                    if (data.valid === "false") {
                        swal("Error", data.msg, "error")
                    } else {
                        $("#cds").text(data.cds)
                        $("#pep").text(data.pep)
                        GetFlank()
                    }
                })

                @if(row.species == "ZMNO") {

                $.post("@routes.GenomeController.getVarInfo(row.geneid)", (data) => {
                    if (data.valid === "false") {
                        $("#variable").find(".picture_list").html("<h4>Not Found!</h4>")
                    } else {
                        $("#snp-table").bootstrapTable({data: data.snpData})
                        $("#indel-table").bootstrapTable({data: data.indelData})
                        $("#sv-table").bootstrapTable({data: data.svData})
                        Columns("Variation Summay", ["SNP", "Indel", "SV"], [{
                            name: "Nums",
                            data: [data.snpData.length, data.indelData.length, data.svData.length]
                        }], "columns2")


                    }
                })

                $.post("@routes.GenomeController.getNetwork(row.geneid)", (data) => {
                    if (data.valid === "false") {
                        $("#net").find(".picture_list").html("<h4>Not Found!</h4>")
                    } else {
                        $("#net-table").bootstrapTable({data: data.net})
                        NetWork(data)


                    }
                })
                }

                        $.post("@routes.GenomeController.getSnpFreq(row.geneid)", (data) => {
                            if (data.valid === "false") {
                                //$("#heatmap").html("<h4>Not Found!</h4>")
                            } else {

                                heatmapCellType(data)


                            }
                        })


            })

            function GetFlank() {
                let num = $("#flankNum").val();
                $.ajax({
                    url: "@routes.GenomeController.getFlank()",
                    type: "post",
                    data: {
                        num: num,
                        species: "@row.species",
                        chr: "@row.chr",
                        start: "@row.start",
                        end: "@row.end"
                    },
                    success: (data) => {
                        if(data.valid === "false"){
                            swal("Error",data.msg,"error")
                        }else{
                            $("#flank").html(data.flank)
                        }
                    }
                })
            }

            function DownloadSvgFn(svg) {

                let svgs = "<svg xmlns=\"http://www.w3.org/2000/svg\"      xmlns:xlink=\"http://www.w3.org/1999/xlink\"" + $("#" + svg).html().substring(4)
                var blob = new Blob([svgs], {
                    type: "image/svg+xml"
                });
                saveAs(blob, svg + ".svg")
            }




            function GetByGeneId(value,row) {
                return `<a href="/alfalfa/browse/geneByGeneId/${value}" target="_blank">${value}</a>`
            }

            function NetWork(data) {
                let edgesDataset = new vis.DataSet(data.edges);
                let nodesDataset = new vis.DataSet(data.nodes);
                let container = document.getElementById('charts');
                // vis数据
                let data1 = {nodes: nodesDataset, edges: edgesDataset};
                let options = {
                    autoResize: true,
                    width: "1100px",
                    nodes: {
                        shape: 'dot',
                        size: 5,
                        borderWidth: 0,
                        borderWidthSelected: 0,
                        font: '18px arial #333'
                    },
                    physics: false,
                    groups: {
                        geneGroup: {color: {background: 'red'}, borderWidth: 0, size: 10}
                    },
                    edges: {
                        width: 0.2,
                        color: '#999',
                        smooth: {
                            type: 'continuous'
                        }
                    },
                    /*                  layout: {
                                          randomSeed:"123456",
                                          improvedLayout:false
                    /!*                       hierarchical: {
                                               parentCentralization:true,
                                              //  direction: "UD",
                                            },*!/
                                        },*/
                    interaction: {
                        hover: true,
                        tooltipDelay: 50
                    }
                };

                // 初始化网络
                new vis.Network(container, data1, options);
            }

            function heatmapCellType(data) {

                Highcharts.chart('heatmap', {
                    chart: {
                        type: 'column',
                        zoomType: 'x',
                    },
                    title: {
                        text: '@{row.geneid} SNP Allele Freq'
                    },
                    credits:{
                        enabled:false
                    },
                    xAxis: {
                        labels: {
                            enabled: false
                        },
                        categories: data.categories
                    },
                    yAxis: {
                        title: {
                            text:"ALLELE"
                        }
                    },
                    tooltip: {
                        headerFormat: ' <b>Pos: {point.x}</b> <br/>',
                        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
                        shared: true
                    },
                    plotOptions: {
                        column: {
                            stacking: 'percent'
                        },
                        series: {
                            pointPadding: 0,
                            groupPadding: 0,
                            shadow: false
                        }
                    },
                    series: data.series
                });

            }


            function downloadSeq(name, types) {
                let fileName = name + "_" + types + ".fa";
                let content = ">" + name + "\n" + $("#" + types).text().trim();
                let blob = new Blob([content], {
                    type: "text/plain;charset=utf-8"
                });
                saveAs(blob, fileName)
            }

            function ChangeRna() {
                let rnaType = $("#rna-type").val();
                let title = $("#rna-type").find("option[value='" + rnaType + "']").text()
                let data = rnaData[rnaType];
                let header = rnaHeader[rnaType];
                let table = "<thead><tr>"
                $.each(header, (i, v) => {
                    table += "<th>" + v + "</th>"
                })
                table += "</tr></thead><tbody>"

                let series = []
                $.each(data, (i, v) => {
                    series.push({
                        name: v[0],
                        data: v[1]
                    })
                    table += "<tr><td>" + v[0] + "</td>"
                    $.each(v[1], (i1, v1) => {
                        table += "<td>" + v1 + "</td>"
                    })
                    table += "</tr>"
                })
                table += "</tbody>"
                $("#rna-table").bootstrapTable("destroy")
                $("#rna-table").html(table)
                $("#rna-table").bootstrapTable({
                    exportOptions: {
                        fileName: function () {
                            return "@row.geneid" + "_rna_" + rnaType
                        }
                    }
                });
                Columns(title, header.slice(1, header.length), series, "columns")
            }

            function Columns(title, header, series, id) {
                Highcharts.chart(id, {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: title
                    },
                    credits: {
                        enabled: false
                    },
                    xAxis: {
                        categories: header,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0
                    },
                    tooltip: {
                        // head + 每个 point + footer 拼接成完整的 table
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            borderWidth: 0
                        }
                    },
                    series: series
                });
            }


    </script>

}

@RnaSelect = {
    <select class="form-control" id="rna-type" onchange="ChangeRna()">
        <option value="1">1. Roots under Al treatment</option>
        <option value="2">2. Leaves under cow saliva treatment</option>
        <option value="3">3. Roots under ABA treatment</option>
        <option value="4">4. Roots under salt & mannitol treatment</option>
        <option value="5">5. Seedlings under cold treatment</option>
        <option value="6">6. Leaves at different stages</option>
        <option value="7">7. Different tissues of Medicago truncatula</option>
        <option value="8">8. Roots infected with root-knot nematode</option>
        <option value="9">9. 27 diverse alfalfa genotypes</option>
        <option value="10">10. Buds under salt stress</option>
        <option value="11">11. Roots at seedling stage under Cd stress</option>
        <option value="12">12. Roots at germination stage under salt stress</option>
        <option value="13">13. Roots at seedling stage under salt stress</option>
        <option value="14">14. Different defoliation traits (leaf)</option>
        <option value="15">15. Divergent cell wall composition</option>
        <option value="16">16 .Roots under atrazine treatment</option>
        <option value="17">17. Roots under Pb treatment</option>
        <option value="18">18. Leaves with different dormancy</option>
    </select>

}

@snpTable = {
    <table class="table table-hover table-bordered" id="snp-table" style="width: 100%;" data-advanced-sortable="true" data-pagination="true"
    data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all" data-page-list="[10]"
    >
        <thead>
            <tr>
                <th data-field="0" data-sortable="true" data-search-type="text">Chr</th>
                <th data-field="1" data-sortable="true" data-search-type="text">Start</th>
                <th data-field="2" data-sortable="true" data-search-type="text">End</th>
                <th data-field="3" data-sortable="true" data-search-type="text">Ref</th>
                <th data-field="4" data-sortable="true" data-search-type="text">Alt</th>
                <th data-field="5" data-sortable="true" data-search-type="text">Func.refGene</th>
                <th data-field="6" data-sortable="true" data-search-type="text">Gene.refGene</th>
                <th data-field="7" data-sortable="true" data-search-type="text">GeneDetail.refGene</th>
                <th data-field="8" data-sortable="true" data-search-type="text">ExonicFunc.refGene</th>
                <th data-field="9" data-sortable="true" data-search-type="text">AAChange.refGene</th>
            </tr>
        </thead>
    </table>
}

@indelTable = {
    <table class="table table-hover table-bordered" id="indel-table" style="width: 100%;" data-advanced-sortable="true" data-pagination="true"
    data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all" data-page-list="[10]"
    >
        <thead>
            <tr>
                <th data-field="0" data-sortable="true" data-search-type="text">#CHROM</th>
                <th data-field="1" data-sortable="true" data-search-type="text">POS</th>
                <th data-field="2" data-sortable="true" data-search-type="text">ID</th>
                <th data-field="3" data-sortable="true" data-search-type="text">REF</th>
                <th data-field="4" data-sortable="true" data-search-type="text">ALT</th>
                <th data-field="5" data-sortable="true" data-search-type="text">Chr</th>
                <th data-field="6" data-sortable="true" data-search-type="text">Start</th>
                <th data-field="7" data-sortable="true" data-search-type="text">End</th>
                <th data-field="8" data-sortable="true" data-search-type="text">Ref</th>
                <th data-field="9" data-sortable="true" data-search-type="text">Alt</th>
                <th data-field="10" data-sortable="true" data-search-type="text">Func.refGene</th>
                <th data-field="11" data-sortable="true" data-search-type="text">Gene.refGene</th>
                <th data-field="12" data-sortable="true" data-search-type="text">GeneDetail.refGene</th>
                <th data-field="13" data-sortable="true" data-search-type="text">ExonicFunc.refGene</th>
                <th data-field="14" data-sortable="true" data-search-type="text">AAChange.refGene</th>
            </tr>
        </thead>
    </table>
}

@svTable = {
    <table class="table table-hover table-bordered" id="sv-table" style="width: 100%;" data-advanced-sortable="true" data-pagination="true"
    data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all" data-page-list="[10]"
    >
        <thead>
            <tr>
                <th data-field="0" data-sortable="true" data-search-type="text">Chr</th>
                <th data-field="1" data-sortable="true" data-search-type="text">Start</th>
                <th data-field="2" data-sortable="true" data-search-type="text">End</th>
                <th data-field="3" data-sortable="true" data-search-type="text">Ref</th>
                <th data-field="4" data-sortable="true" data-search-type="text">Alt</th>
                <th data-field="5" data-sortable="true" data-search-type="text">Func.refGene</th>
                <th data-field="6" data-sortable="true" data-search-type="text">Gene.refGene</th>
                <th data-field="7" data-sortable="true" data-search-type="text">GeneDetail.refGene</th>
                <th data-field="8" data-sortable="true" data-search-type="text">ExonicFunc.refGene</th>
                <th data-field="9" data-sortable="true" data-search-type="text">AAChange.refGene</th>
            </tr>
        </thead>
    </table>
}

@table(id: String) = {
    <table class="table table-hover table-bordered" id="@id" style="width: 100%;"
    data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"
    ></table>
}